<template>
    <div class="breadCrumb">
        <router-link :to="{name:item.name}" v-for="item in data" :key="item.name">{{item.meta.name+separator}}</router-link>
    </div>
</template>
<script setup>
import {watchEffect,toRefs} from "vue"
//Vue3.2以后 defineEmits defineProps不再需要引入了，已经在全局了
//声明props
let props=defineProps({
    data:{
        type:Array,
        default(){
            return []
        }
    },
    separator:{
        type:String,
        default(){
            return "/"
        }
    }
})
watchEffect(()=>{
    console.log(props.data)
})
//解构props
let {data,separator} =toRefs(props)
</script>
<style>
.breadCrumb{
    margin: 10px 0;
}
.breadCrumb a{
    font-size: 20px;
    font-weight: 900;
    color:orange;
    margin: 0 10px;
}
</style>